import { defineConfig, presetUno } from 'unocss'

export default defineConfig({
  // 预设配置
  presets: [
    // UnoCSS默认预设，包含Tailwind CSS兼容的工具类
    presetUno(),
  ],
  
  // 自定义规则
  rules: [
    // 自定义uni-app常用工具类
    ['flex-center', { display: 'flex', 'align-items': 'center', 'justify-content': 'center' }],
    ['flex-between', { display: 'flex', 'align-items': 'center', 'justify-content': 'space-between' }],
    ['flex-col', { display: 'flex', 'flex-direction': 'column' }],
    ['flex-col-center', { display: 'flex', 'flex-direction': 'column', 'align-items': 'center', 'justify-content': 'center' }],
    
    // uni-app常用布局
    ['safe-area-top', { 'padding-top': 'env(safe-area-inset-top)' }],
    ['safe-area-bottom', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
    ['safe-area-left', { 'padding-left': 'env(safe-area-inset-left)' }],
    ['safe-area-right', { 'padding-right': 'env(safe-area-inset-right)' }],
    
    // rpx单位支持
    [/^text-(\d+)rpx$/, ([, d]) => ({ 'font-size': `${d}rpx` })],
    [/^w-(\d+)rpx$/, ([, d]) => ({ width: `${d}rpx` })],
    [/^h-(\d+)rpx$/, ([, d]) => ({ height: `${d}rpx` })],
    [/^m-(\d+)rpx$/, ([, d]) => ({ margin: `${d}rpx` })],
    [/^p-(\d+)rpx$/, ([, d]) => ({ padding: `${d}rpx` })],
    [/^mt-(\d+)rpx$/, ([, d]) => ({ 'margin-top': `${d}rpx` })],
    [/^mb-(\d+)rpx$/, ([, d]) => ({ 'margin-bottom': `${d}rpx` })],
    [/^ml-(\d+)rpx$/, ([, d]) => ({ 'margin-left': `${d}rpx` })],
    [/^mr-(\d+)rpx$/, ([, d]) => ({ 'margin-right': `${d}rpx` })],
    [/^pt-(\d+)rpx$/, ([, d]) => ({ 'padding-top': `${d}rpx` })],
    [/^pb-(\d+)rpx$/, ([, d]) => ({ 'padding-bottom': `${d}rpx` })],
    [/^pl-(\d+)rpx$/, ([, d]) => ({ 'padding-left': `${d}rpx` })],
    [/^pr-(\d+)rpx$/, ([, d]) => ({ 'padding-right': `${d}rpx` })],
  ],
  
  // 快捷方式
  shortcuts: [
    // 常用布局快捷方式
    ['btn', 'px-4 py-2 rounded cursor-pointer inline-block text-center'],
    ['btn-primary', 'btn bg-blue-500 text-white hover:bg-blue-600'],
    ['btn-secondary', 'btn bg-gray-500 text-white hover:bg-gray-600'],
    ['card', 'bg-white rounded-lg shadow-md p-4'],
    ['input', 'border border-gray-300 rounded px-3 py-2 focus:outline-none focus:border-blue-500'],
  ],
  
  // 主题配置
  theme: {
    colors: {
      primary: '#007aff',
      secondary: '#5856d6',
      success: '#34c759',
      warning: '#ff9500',
      error: '#ff3b30',
    },
    fontFamily: {
      sans: ['PingFang SC', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
    },
  },
  
  // 安全列表 - 确保这些类始终被包含
  safelist: [
    'flex-center',
    'flex-between',
    'flex-col',
    'flex-col-center',
    'btn',
    'btn-primary',
    'btn-secondary',
    'card',
    'input',
  ],
  
  // 提取器配置
  extractors: [
    // 支持Vue单文件组件
    {
      extensions: ['vue'],
      extractor: (content) => {
        // 提取template中的class
        const templateMatches = content.match(/<template[^>]*>([\s\S]*?)<\/template>/g)
        if (templateMatches) {
          return templateMatches
            .join('')
            .match(/class="([^"]*)"/g)
            ?.map(match => match.replace(/class="/, '').replace(/"$/, ''))
            .join(' ')
            .split(/\s+/)
            .filter(Boolean) || []
        }
        return []
      }
    }
  ]
})
